<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-button style="float: left" type="warning" size="small" @click="exportFn" >导出</el-button>
      </div>
      <query :execl="execlData" :uploadShow="uploadShow"  :flage="flage"  @execlReturn="execlReturn"  :tables.sync ="tableDate" :selectArray.sync="excelConfig.multipleSelection">
      </query>
    </el-card>
  </div>
</template>
<script>
import query from "@/components/Excel/query"
  export default {
    components:{
      query
    },
    data() {
      return {
        tableDate:[],
        excelConfig: {
          excelHeader: [], //excel的表头
          excelFilterVal: [], //导出列
          multipleSelection: [], //勾选的数据
          defaultList: [], //默认表数据
          fileName: "账扣费用单", //文件名
        },
        exportVisible: false,
        flage: false,
        uploadShow: true,
        execlData: {
          title: "账扣费用单导入模板",
          url: "",
          type: "POSJSON",
          selectSign:true,//是否有选择框
          head: [
            {
              name: "合作商编号",
              field: "partnerId",
              required: true,
              max: 50,
              val:''
            },
            {
              name: "合作商名称",
              field: "partnerNa",
              required: true,
              max: 50,
              val:''
            },
            {
              name: "合同",
              field: "contractNo",
              required: true,
              max: 50,
              val:""
            },
            {
              name: "费用类型",
              field: "deductItemna",
              required: true,
              max: 50,
              val:""
            },
            {
              name: "扣款日期",
              field: "feedate",
              type: "date",
              required: true,
              max: 50,
            },
            {
              name: "费用金额",
              field: "feeamt",
              required: true,
              max: 50,
              val:''
            },
            {
              name: "经营方式",
              field: "metchmeth",
              required: true,
              max: 50,
              val:''
            },
            {
              name: "核算部门",
              field: "deptNa",
              required: true,
              max: 50,
              val:''
            },
            {
              name: "合同结束日期",
              field: "endDate",
              type: "date",
              required: false,
              max: 50,
            },
            {
              name: "收取方式",
              field: "recmode",
              required: true,
              max: 50,
            },
          ],
        },
      };
    },
    methods:{
      excelFn(val){
        //插入表格的数据
        this.tableDate = val
      },
      execlReturn() {
        this.$refs.execl.clearFile();
      },
      exportFn(){
        if(this.excelConfig.multipleSelection.length == 0){
          this.$message({
            type:'warning',
            message:"请选择数据进行导出"
          });
          return;
        }
        //表头
         this.excelConfig.excelHeader = this.execlData.head.map((v) => {
        return v.name;
        });
        //表头对应字段
        this.excelConfig.excelFilterVal = this.execlData.head.map((v) => {
          return v.field;
        });
        //导出的所有数据
        this.excelConfig.defaultList = JSON.parse(JSON.stringify(this.tableDate)).map((v) => {
          if (v.metchmeth == "H") {
            v.metchmeth = "联营";
          } else if (v.metchmeth == 'S') {
            v.metchmeth = "租赁";
          }
          if (v.recmode == "PC") {
            v.recmode = "管理端";
          } else if (v.recmode == "PHONE") {
            v.recmode = "手机端";
          }
          return v;
        });
        this.$common.exportExcel(this.excelConfig)
      }
    }
   
  };
</script>
<style scoped>
.contractno{
  text-align: left;
}
</style>